import useConfig from "@/composables/useConfig";
import { CameraProps } from "@/type/type";
import { useEffect, useState } from "react";

const Camera:React.FC<CameraProps> = (props:CameraProps)=>{
    const {config} = props;

    const constraints = {
        audio:false,
        video:{deviceId:config.deviceId}
    } as MediaStreamConstraints;


    useEffect(()=>{
        const videoDom = document.querySelector("#video")! as HTMLVideoElement;
        const getMedias =async ()=>{
            const medias = await navigator.mediaDevices.enumerateDevices();
            setMedias(medias)
        }
        getMedias();
        const palyVideo = async ()=>{
            const oneVideoStream = await navigator.mediaDevices.getUserMedia(constraints);
            videoDom.srcObject = oneVideoStream;
            // videoDom.play();
        }
        palyVideo();
    },[config])
    const [medias,setMedias] = useState< MediaDeviceInfo[]>()

    useEffect(()=>{
        // console.log(medias)
    },[medias])


    return (
        <main style={{width:"100vw",height:"100vh",display:"flex",overflow:"hidden",borderRadius:config.isRadius?"50%":"0",border:`${config.border} solid ${config.color}`}}>
            <video id="video" autoPlay style={{objectFit:"cover"}}></video>
        </main>
    )
}

export default Camera